<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>离职员工信息</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body>
<table id="demo" lay-filter="test"></table>
<!--表头工具栏-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="update">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>
<script src="/layui/js/jquery-3.5.1.js"></script>
<script src="/layui/layui.js"></script>
<script>
    layui.use(['table','layer','form'], function(){
        var table = layui.table;
        let layer = layui.layer;
        let form = layui.form;
        //第一个实例
        table.render({
            elem: '#demo'
            ,toolbar: true
            ,url: '/queryallquit' //数据接口
            ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'u_id', title: 'ID',  sort: true, fixed: 'left'}
                ,{field: 'u_name', title: '姓名' }
                ,{field: 'u_sex', title: '性别' }
                ,{field: 'u_email', title: '邮箱'}
                ,{field: 'postname', title: '岗位'}
                ,{field: 'u_phone', title: '电话'}
                ,{field: 'q_type', title: '离职原因'}
                ,{field: 'q_time', title: '离职时间'}
                ,{field: 'departmentname', title: '部门'}
                ,{field: 'u_entrytime', title: '入职时间', sort: true}
                ,{field: 'u_university', title: '毕业院校'}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo'}
            ]]
            ,page: {
                limit:5,
                limits:[1, 5, 10, 40, 100],
                layout:['prev', 'page', 'next','count','limit','refresh']
            } //开启分页
        });
        table.on('tool(test)', function(obj){
            switch(obj.event){
                case 'delete':
                    layer.open({
                        content: '是否确定删除此员工信息'
                        ,btn: ['确定', '取消']
                        ,yes: function(index, layero){
                            let data = obj.data;
                            let uid = data.u_id;
                            $.post("/deletequit",{"uid":uid},function (data) {
                                if (data.code===200){
                                    layer.msg(data.info);
                                    table.reload('demo');
                                }else layer.msg(data.info)
                            },"json")
                        }
                        ,btn2: function(index, layero){
                            //return false 开启该代码可禁止点击该按钮关闭
                        }
                    })
                    break;
                case 'update':
                    layer.open({
                        type: 1,
                        area: ['360px', '180px'],
                        content: '<form class="layui-form" action=""><div class="layui-form-item">\n' +
                            '    <label class="layui-form-label">单选框</label>\n' +
                            '    <div class="layui-input-block">\n' +
                            '      <input type="radio" name="quit" value="离职" title="离职" checked>\n' +
                            '      <input type="radio" name="quit" value="未离职" title="未离职" >\n' +
                            '    </div>\n' +
                            '  </div>' +
                            '<div class="layui-form-item">\n' +
                            '    <div class="layui-input-block">\n' +
                            '      <button class="layui-btn" lay-submit lay-filter="formDemo">修改</button>\n' +
                            '      <button type="reset" class="layui-btn layui-btn-primary">重置</button>\n' +
                            '    </div>\n' +
                            '  </div></form>',
                        success: function () {
                            form.render();
                            form.on('submit(formDemo)', function(data){
                                let data2 = obj.data;
                                let uId = data2.u_id;
                                let field = data.field;
                                let quit = field.quit;
                                $.post("/updatequit",{"field":quit,"uid":uId},
                                    function (data1) {
                                    if (data1.code===500){
                                        layer.msg(data1.info)
                                    }else layer.msg(data1.info)
                                },"json")
                                return false;
                            });
                        }
                    });
                    break;
                default:
                    break;
            }
        });
        table.on('checkbox(test)', function(obj){
            // console.log(obj.checked); //当前是否选中状态
            // console.log(obj.data); //选中行的相关数据
            // console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
        });
    });
</script>
</body>
</html>